@import "../commons/variables.scss";
@import "../commons/px2rem.scss";

body {
    font-family: "Microsoft YaHei", "Microsoft YaHei", "Helvetica Neue", Arial,
        HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
    position: relative;
    width: 100vw !important;
    height: 100vh !important;
    background-color: transparent;
    margin: 0 auto;
}

.container {
    position: relative;
    height: 100%;
    width: px2rem(640);
    margin: 0 auto;
}

.pay-container {
    width: 80%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-sizing: border-box;
    border-radius: px2rem(8);
}

.pay-header {
    background-image: linear-gradient(262deg,#13327c 5%,#5c7cf6);
    border-top-left-radius: px2rem(8);
    border-top-right-radius: px2rem(8);
    height: px2rem(64);
    line-height: px2rem(64);
    text-align: center;
    font-size: px2rem(32);
    color: #fff;
    font-weight: 400;

    .close-btn {
        position: relative;
        top: -(px2rem(55));
        left: (px2rem(460));
        width: px2rem(40);
        height: px2rem(40);
    }
}

.pay-content {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-top: px2rem(20);
    padding-bottom: px2rem(20);
    background-color: #f3f3f3;
    border-bottom-left-radius: px2rem(8);
    border-bottom-right-radius: px2rem(8);

    .order-info {
        width: 90%;
        text-align: center;
        margin: 0 auto;
        padding: px2rem(20);

        .order-amount {
            color: #000;
            font-size: px2rem(48);

            .amount {
                font-weight: 700;
                font-size: px2rem(48);
            }
        }

        .goods-name {
            margin-top: px2rem(5);
            font-size: px2rem(24);
            font-weight: 700;
            color: #878787;
        }
    }

    .pay-type-box {
        width: 90%;
        margin: 0 auto px2rem(25);
        display: flex;
        align-items: center;
        justify-content: center;

        .type-item {
            text-align: center;
            padding-top: px2rem(10);
            cursor: pointer;
            margin-left: px2rem(12);

            .paying-icon {
                position: relative;
                margin: 0 auto;
                top: (px2rem(12));
                width: px2rem(60);
                height: px2rem(60);
            }

            .payok-icon {
                position: relative;
                margin: 0 auto;
                top: (px2rem(12));
                width: px2rem(60);
                height: px2rem(60);
            }

            .item-text {
                position: relative;
                width: 100%;
                height: px2rem(30);
                line-height: px2rem(30);
                color: #000;
                font-size: px2rem(22);
                font-weight: 400;
                padding-top: px2rem(30);
            }
        }
    }
}
